@import "src/styles/variables";
@import "src/styles/mixin";
.achievement {
	// background-color: #f4f4f4;
	min-height: 700px;
	&-nav{
        display:flex;
        border-radius:0px 0px 20px 20px;
        background:#fff;
        section{
            position:relative;
            font-size: 26px;
            flex:auto;
            height: 108px;
            line-height: 90px;
            text-align: center;
            &.cur{
                font-weight:bold;
                font-size:28px;
                &::after{
                    content: "";
                    position: absolute;
                    left: 50%;
                    margin-left: -28px;
                    bottom: 24px;
                    width: 56px;
                    height: 4px;
                    overflow: hidden;
                    @include gradient(right,rgba(242,11,34,1),rgba(242,11,34,0.1));
                }
            }
        }
    }
	&-header {
		background-color: $default;
		padding: 20px 0;
		margin-bottom: 20px;
		z-index: 9999;
		.item {
			display: flex;
			justify-content: space-between;
			// flex-wrap: wrap;
			width: 50%;
			margin-left: 30px;
			height: 56px;
			border: 1.5px solid $warning;
			border-radius: 28px;
			box-sizing: border-box;
			overflow: hidden;
			li {
				flex: 1;
				// height: 100%;
				text-align: center;
				border-right: 1px solid $warning;
				box-sizing: border-box;
				&:last-child {
					border-right: none;
				}
				&.cur {
					background-color: $warning;
					color: $default;
					span{
						color: $default;
					}
				}
				span {
					display: inline-block;
					width: 100%;
					color: $warning;
					font-size: 22px;
					line-height: 56px;
					&.cur {
						border-right: 1px solid $warning;
						color: $default;
						background-color: $warning;
					}
				}
			}
		}
		.date {
			margin-right: 30px;
			display: inline-block;
			color: #666;
			span {
				font-size: 26px;
				line-height: 60px;
			}
			.date-hide {
				font-size: 16px;
				transform: rotateZ(90deg);
				margin-left: 10px;
				vertical-align: 0;
			}
			.date-show {
				line-height: 56px;
				span {
					color: $warning;
					font-size: 24px;
				}
			}
		}
	}
	.achievement-content {
		background-color: $default;
		box-sizing: border-box;
		margin-bottom: 20px;
		.list {
			height: 96px;
			line-height: 96px;
			color: #333;
			padding:0 30px;
			border-bottom: 1px solid #EDEDED;
			font-size: 28px;
			overflow: hidden;
			&:last-child {
				border-bottom:0;
			}
			span {
				display: inline-block;
				max-width: 50%;
				font-size: 28px;
				@include showEllipsis;
				&.commission-number2 {
					display: block;
					line-height: 45px;
					text-align: right;
					i {
						font-size: 24px;
					}
				}
				&.fr {
					color: #999;
				}
			}
			.commission {
				max-width: 50%;
				display: flex;
				// margin-top: 12px;
				justify-content: center;
				align-items: center;
				height: 100%;
				p {
					width: 100%;
					line-height: 44px;
					color: #333;
					text-align: right;
					font-size: 24px;
					@include showEllipsis;
					&:last-child {
						color: #999;
						font-size: 20px;
					}
				}
				.icon-right {
					width: 30px;
					height: 100%;
					margin: 0 0 0 10px;
				}
			}
		}
	}
	.explain {
		margin: 30px;
		.explain_click {
		  color: #999;
		  font-size: 24px;
		}
		.icon {
		  display: inline-block;
		  width: 48px;
		  height: 48px;
		  line-height: 48px;
		  font-size: 28px;
		  text-align: center;
		  border: 2px solid $warning;
		  color: $warning;
		  font-weight: bold;
		  border-radius: 50%;
		  transform: scale(0.5, 0.5);
		  margin-left: -16px;
		}
	  }
	  //我的目标
	  .dls-target{
		font-family: PingFang SC;
		font-size:28px;
		.target-title{
		  position:relative;
		  padding:20px 30px;
		  line-height:56px;
		  background:#fff;
		  &:before{
			position:absolute;
			top:34px;
			left:30px;
			content:"";
			width:6px;
			height:28px;
			background:#F30C23;
		  }
		  .title{
			font-weight: bold;
			padding-left:16px;
		  }
		  .txt{
			font-size:24px;
			color:#999;
			margin-left: 6px;
		  }
		}
		.target-date{
		  height:68px;
		  padding:0 30px;
		  line-height:68px;
		  color:#666;
		  background:#F7F7F7;
		}
		.target-item{
		  padding:30px;
		  background:#fff;
		  .title{
			margin-bottom:30px;
		  }
		  .target-detail{
			display:flex;
			justify-content:space-around;
			.li{
			  width:210px;
			  padding:34px 0;
			  font-size:26px;
			  text-align:center;
			  border-radius:10px;
			  background:#F7F7F7;
			}
			.data{
			  margin-bottom:10px;
			  font-size:32px;
			  font-weight:bold;
			  &.now-data{
				color:#F30C23;
			  }
			  &.tar-data{
				color:#333333;
			  }
			}
		  }
		}
	}
}
.Glossary {
  margin-top: 30px;
  padding-left: 30px;
  li {
    padding: 24px 0;
    border-bottom: 1px solid #f4f4f4;
    box-sizing: border-box;
    p {
      width: 710px;
      line-height: 48px;
      color: #333;
      font-size: 28px;
      &:nth-child(2) {
        color: #999;
        font-size: 24px;
      }
    }
  }
}
.ok {
  background-color: $warning;
  text-align: center;
  margin: 30px;
  margin-top: 20px;
  border-radius: 42px;
  span {
    line-height: 84px;
    color: $default;
    font-size: 30px;
  }
}
  